<template>
  <div class="body footer" :style="{ background: data.web.background, color: data.web.color }">
    <div class="foot">
      <div class="row" :style="{ background: data.web.Contentbackground }">
        <!-- 内容使用编辑器 -->
        <div class="footlist">
          <el-image class="footimg" :src="'https://webgallery.oss-cn-beijing.aliyuncs.com/' + data.web.img" />
          <div class="copyright">©by {{ copyright }}</div>
        </div>
        <div class="footlist">
          <div class="foottext">
            <!-- 内容使用编辑器 -->
            <Tiptap :content="data.web.content[$i18n.locale]"></Tiptap>
          </div>
          <div class="footlink">
            <a v-if="data.web.telegram" :href="data.web.telegram" target="_blank" rel="noopener noreferrer">
              <div class="iconfont icon-telegram" style="font-size: 25px"></div>
            </a>
            <a v-if="data.web.tuite" :href="data.web.tuite" target="_blank" rel="noopener noreferrer">
              <div class="iconfont icon-tuite" style="font-size: 25px"></div>
            </a>
            <a v-if="data.web.qq" :href="data.web.qq" target="_blank" rel="noopener noreferrer">
              <div class="iconfont icon-qq" style="font-size: 25px"></div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Tiptap from '@/components/Tiptap.vue'
export default {
  components: {
    Tiptap
  },
  props: ['data'],
  data() {
    return {
      copyright: window.location.hostname.toLowerCase().replace(/^www\./, '')
    }
  }
}
</script>
<style scoped>
	.footer .foottext {
		max-width: 360px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.footer .footlist {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.footer .footlink {
		display: flex;
		flex-direction: row;
		color: #73767a;
		gap: 15px;
		justify-content: flex-end;
	}
	.copyright {
		color: #b1b3b8;
	}
	.footimg {
		height: 60px;
	}
</style>
